<template>
  <div class="login-account">
    <el-form :model="userInfo" ref="accountRef" :rules="rules">
      <el-form-item label="账号" prop="name">
        <el-input v-model="userInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userInfo.password" show-password></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import type { FormInstance, ElForm } from 'element-plus';
import localCache from '@/utils/cache';
import { rules } from '../config/account-config';
const store = useStore();
const userInfo = reactive({
  name: 'coderwhy',
  password: '123456'
});

// const accountRef = ref<InstanceType<typeof ElForm>>();
const accountRef = ref<FormInstance>();
const accountLogin = (keePassword: boolean) => {
  accountRef.value?.validate((vali) => {
    if (vali) {
      if (keePassword) {
        //记住密码
        localCache.setCache('name', userInfo.name);
        localCache.setCache('password', userInfo.password);
      } else {
        localCache.deleteCache('name');
        localCache.deleteCache('password');
      }
      // { ...userInfo }这样做的目的是使传过去的对象为普通对象,而不是一个Proxy对象
      store.dispatch('login/userLogin', { ...userInfo });
    } else {
      return false;
    }
  });
};

defineExpose({ accountLogin });
</script>

<style scoped></style>
